<!--
 * @FilePath     : /study_code/layui/19-1-2.html
 * @Description  : treetable.render(options) 配置项详细说明 （具体见编号）
 * @Date         : 2025-04-11 17:12:05
 * @Author       : Fang YingGui
 * @LastEditors  : fangyinggui 18715384437@163.com
 * @LastEditTime : 2025-04-11 17:45:27
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="/layui/dist/css/layui.css" />
  </head>
  <body>
    <div id="demo"></div>

    <script src="/layui/dist/layui.js"></script>
    <script>
      layui
        .config({
          base: '/layui/extends_modules',
        })
        .extend({
          treetable: '/layui-treetable/treetable',
        })
        .use(['form', 'treetable', 'layer'], function () {
          var layer = layui.layer,
            form = layui.form,
            $ = layui.jquery,
            treetable = layui.treetable

          console.log(1, '有没有treetable 模块？', treetable)

          // 静态数据
          var nodes = [
            {
              id: '1',
              name: '父节点1',
              text: '测试',
              checked: false,
              children: [
                {
                  id: '11',
                  name: '子节点11',
                  text: '',
                },
                {
                  id: '12',
                  name: '子节点12',
                  text: '',
                },
              ],
            },
            {
              id: '2',
              name: '父节点2',
              text: '',
              checked: true,
              children: [
                {
                  id: '21',
                  name: '子节点21',
                  text: '',
                  children: [
                    {
                      id: '211',
                      name: '子节点211',
                      text: '',
                    },
                  ],
                },
              ],
            },
            {
              id: '3',
              name: '父节点3',
              text: '',
            },
          ]

          var layout = [
            {
              name: '菜单名称',
              treeNodes: true,
              headerClass: 'value_col',
              colClass: 'value_col',
              style: '',
            },
            { name: 'id', field: 'id', headerClass: 'value_col', colClass: 'value_col', style: '' },
            {
              name: '文本',
              field: 'text',
              headerClass: 'value_col',
              colClass: 'value_col',
              style: '',
            },
            {
              name: '操作',
              headerClass: 'value_col',
              colClass: 'value_col',
              style: 'width: 20%',
              render: function (row) {
                return (
                  "<a class='layui-btn layui-btn-danger layui-btn-sm' onclick='del(" +
                  row +
                  ")'><i class='layui-icon'>&#xe640;</i> 删除</a>"
                ) //列渲染
              },
            },
          ]

          var tree = layui.treetable({
            elem: '#demo', // 设置组件渲染到的容器

            // spreadable: false, // （默认）节点不展开
            spreadable: true, // 这里展开所有节点

            // checkbox: false, // （默认）不显示复选框
            checkbox: true, // 显示复选框

            layout: layout, // 表头结构配置

            nodes: nodes,
          })

          form.render()
        })
    </script>
  </body>
</html>
